接入编辑器 | 您所在的位置:网站首页 › 阿里vue 低代码 › 接入编辑器 |
接入编辑器 您有两种方式初始化低代码编辑器: clone 低代码项目的官方 demo,直接启动项目。适合普通人。手工引入低代码 UMD 包,手工配置、打包和启动。适合 Webpack 配置工程师。方法 1:通过官方命令行工具创建编辑器确保本地安装了 Node.js 和 npm,如果没有,您可以通过 nvm 进行快捷的安装 确保为 npm 设置了可以访问的 npm 源,保证安装过程无网络问题 安装官方命令行工具 npm install -g @alilc/create-element@latest通过命令行工具创建 npm init @alilc/element editor-project-name这时会看到一个选项列表 ![]() 选择编辑器,并填写对应的问题,即可完成创建。 注 @alilc/create-element 版本需 >= 1.0.4,若看不到编辑器选项,请重新执行步骤 3 进入创建后的目录 cd editor-project-name安装依赖 npm install安装依赖成功后,启动项目 (注意观察上一步的输出,如有 error 等失败信息,请先进行排查) npm start执行后如果看到这个界面,说明项目启动成功。您可以继续看后续章节了。本章节后续内容均为高级配置方式。 如果您不是从零开始的项目,您可能需要手工引入低代码引擎。 引入 UMD 包资源我们需要在启动前,正确在项目中通过 UMD 包方式直接依赖如下内容: 亦可使用异步加载工具,如果您按照正确的顺序进行加载 注:如果 unpkg 的服务比较缓慢,您可以使用官方 CDN 来获得确定版本的低代码引擎,如对于引擎的 1.0.18 版本,可用以下官方 CDN 替代 https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js配置打包因为这些资源已经通过 UMD 方式引入,所以在 webpack 等构建工具中需要配置它们为 external,不再重复打包: { "externals": { "react": "var window.React", "react-dom": "var window.ReactDOM", "prop-types": "var window.PropTypes", "@alifd/next": "var window.Next", "@alilc/lowcode-engine": "var window.AliLowCodeEngine", "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt", "moment": "var window.moment", "lodash": "var window._" }}初始化低代码编辑器正确引入后,我们可以直接通过 window 上的变量进行引用,如 window.AliLowCodeEngine.init。您可以直接通过此方式初始化低代码引擎: // 确保在执行此命令前,在 中已有一个 id 为 lce-container 的 window.AliLowCodeEngine.init(document.getElementById('lce-container'), { enableCondition: true, enableCanvasLock: true,});如果您的项目中使用了 TypeScript,您可以通过如下 devDependencies 引入相关包,并获得对应的类型推断。 // package.json{ "devDependencies": { "@alilc/lowcode-engine": "^1.0.0" }}// src/index.tsximport { init } from '@alilc/lowcode-engine';init(document.getElementById('lce-container'), { enableCondition: true, enableCanvasLock: true,});init 的功能包括但不限于: 传递 options 并设置 config 对象;传递 preference 并设置 plugins 入参;初始化 Workbench;本节中的低代码编辑器例子可以在 demo 中找到:https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts 配置低代码编辑器详见低代码扩展简述章节。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |